<template>
  <div>
    <el-card class="margin-30" shadow="never">
      <div slot="header">
        <span>注册用户列表</span>
      </div>
      <el-table :data="userList" border stripe>
        <el-table-column
          fixed="left"
          type="index"
          align="center"
          label="序号"
          width="70"
        />
        <el-table-column
          align="center"
          label="头像"
          width="200"
        >
          <template slot-scope="scope">
            <el-image :src="scope.row.icon">
              <div slot="error" class="image-slot">
                <div class="img" />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          align="center"
          label="昵称"
          width="170"
        />
        <el-table-column
          prop="realname"
          align="center"
          label="真实姓名"
          width="170"
        />
        <el-table-column
          align="center"
          label="性别"
          width="170"
        >
          <template slot-scope="scope">
            {{ scope.row.sex?'男':'女' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="电话"
          width="150"
        />
        <el-table-column
          prop="email"
          align="center"
          label="邮箱"
          width="150"
        />
        <el-table-column
          prop="birthday"
          align="center"
          label="生日"
          width="150"
        />
        <el-table-column
          prop="createTime"
          align="center"
          label="注册时间"
          width="200"
        />
      </el-table>

      <el-pagination
        style="margin-top:10px;"
        :current-page="pagination.start"
        :page-sizes="pagination.sizes"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import {
  findMembersByPage as findMembersByPageApi
} from '@/api/registerManage'
import mix from '@/mixin'
export default {
  name: 'UserManage',
  mixins: [mix],
  data() {
    return {
      userList: []
    }
  },
  created() {
    this.getUserLsit()
  },
  methods: {
    // 改变limit一页多少条数据
    handleSizeChange(e) {
      this.pagination.limit = e
      this.pagination.start = 1
      this.getUserLsit()
    },
    // 改变当前页数start
    handleCurrentChange(e) {
      this.pagination.start = e
      this.getUserLsit()
    },
    // 获取注册用户信息
    getUserLsit() {
      findMembersByPageApi(this.pagination.start, this.pagination.limit)
        .then(res => {
          const { message, success, data } = res
          if (success) {
            this.pagination.total = data.total
            this.userList = data.rows
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.img{
    width: 60px;;
    height: 60px;
    border-radius: 50%;
    background-color: #c0c4cc;
    overflow: hidden;
}
</style>
